<template>
  <!-- 文章区域 -->
  <div>
    <!-- 文章一 -->
    <el-card>
      <el-row :gutter="10">
        <!-- 封面图 -->
        <el-col :span="8">
          <el-card class="img">
            <el-image :src="article_pic1" class="image"></el-image>
          </el-card>
        </el-col>
        <!-- 文章简介 -->
        <el-col :span="16">
          <el-card class="article">
            <!-- 文章标题 -->
            <el-card class="title"
              >中国选手摘得东京奥运会首金 杨倩获射击女子10米气步枪金牌</el-card
            >
            <!-- 简介内容 -->
            <el-card class="content"
              >7月24日举行的东京奥运会女子10米气步枪决赛中，中国选手杨倩夺得冠军，为中国代表团揽入本届奥运会第一枚金牌。这也是本届东京奥运会诞生的首枚金牌。图为杨倩在领奖台上比出爱心手势。</el-card
            >
            <!-- 统计数据 -->
            <el-card class="article_info">
              <span>点赞数量：201</span>
              <span>评论数量：57</span>
              <span>阅读数量：1048</span>
              <span>发布日期：2021-07-24 10:56:33</span>
            </el-card>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!-- 文章二 -->
    <el-card>
      <el-row :gutter="10">
        <!-- 封面图 -->
        <el-col :span="8">
          <el-card class="img">
            <el-image :src="article_pic2"></el-image>
          </el-card>
        </el-col>
        <!-- 文章简介 -->
        <el-col :span="16">
          <el-card class="article">
            <!-- 文章标题 -->
            <el-card class="title">文章标题2</el-card>
            <!-- 简介内容 -->
            <el-card class="content">文章简介2</el-card>
            <!-- 统计数据 -->
            <el-card class="article_info">
              <span>点赞数量：</span>
              <span>评论数量：</span>
              <span>阅读数量：</span>
              <span>发布日期：</span>
            </el-card>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!-- 文章三 -->
    <el-card>
      <el-row :gutter="10">
        <!-- 封面图 -->
        <el-col :span="8">
          <el-card class="img">
            <el-image :src="article_pic3"></el-image>
          </el-card>
        </el-col>
        <!-- 文章简介 -->
        <el-col :span="16">
          <el-card class="article">
            <!-- 文章标题 -->
            <el-card class="title">文章标题3</el-card>
            <!-- 简介内容 -->
            <el-card class="content">文章简介3</el-card>
            <!-- 统计数据 -->
            <el-card class="article_info">
              <span>点赞数量：</span>
              <span>评论数量：</span>
              <span>阅读数量：</span>
              <span>发布日期：</span>
            </el-card>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!-- 文章四 -->
    <el-card>
      <el-row :gutter="10">
        <!-- 封面图 -->
        <el-col :span="8">
          <el-card class="img">
            <el-image :src="article_pic4"></el-image>
          </el-card>
        </el-col>
        <!-- 文章简介 -->
        <el-col :span="16">
          <el-card class="article">
            <!-- 文章标题 -->
            <el-card class="title">文章标题4</el-card>
            <!-- 简介内容 -->
            <el-card class="content">文章简介4</el-card>
            <!-- 统计数据 -->
            <el-card class="article_info">
              <span>点赞数量：</span>
              <span>评论数量：</span>
              <span>阅读数量：</span>
              <span>发布日期：</span>
            </el-card>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!-- 文章五 -->
    <el-card>
      <el-row :gutter="10">
        <!-- 封面图 -->
        <el-col :span="8">
          <el-card class="img">
            <el-image :src="article_pic5"></el-image>
          </el-card>
        </el-col>
        <!-- 文章简介 -->
        <el-col :span="16">
          <el-card class="article">
            <!-- 文章标题 -->
            <el-card class="title">文章标题5</el-card>
            <!-- 简介内容 -->
            <el-card class="content">文章简介5</el-card>
            <!-- 统计数据 -->
            <el-card class="article_info">
              <span>点赞数量：</span>
              <span>评论数量：</span>
              <span>阅读数量：</span>
              <span>发布日期：</span>
            </el-card>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!-- 文章六 -->
    <el-card>
      <el-row :gutter="10">
        <!-- 封面图 -->
        <el-col :span="8">
          <el-card class="img">
            <el-image :src="article_pic6"></el-image>
          </el-card>
        </el-col>
        <!-- 文章简介 -->
        <el-col :span="16">
          <el-card class="article">
            <!-- 文章标题 -->
            <el-card class="title">文章标题6</el-card>
            <!-- 简介内容 -->
            <el-card class="content">文章简介6</el-card>
            <!-- 统计数据 -->
            <el-card class="article_info">
              <span>点赞数量：</span>
              <span>评论数量：</span>
              <span>阅读数量：</span>
              <span>发布日期：</span>
            </el-card>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!-- 文章七 -->
    <el-card>
      <el-row :gutter="10">
        <!-- 封面图 -->
        <el-col :span="8">
          <el-card class="img">
            <el-image :src="article_pic7"></el-image>
          </el-card>
        </el-col>
        <!-- 文章简介 -->
        <el-col :span="16">
          <el-card class="article">
            <!-- 文章标题 -->
            <el-card class="title">文章标题7</el-card>
            <!-- 简介内容 -->
            <el-card class="content">文章简介7</el-card>
            <!-- 统计数据 -->
            <el-card class="article_info">
              <span>点赞数量：</span>
              <span>评论数量：</span>
              <span>阅读数量：</span>
              <span>发布日期：</span>
            </el-card>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!-- 文章八 -->
    <el-card>
      <el-row :gutter="10">
        <!-- 封面图 -->
        <el-col :span="8">
          <el-card class="img">
            <el-image :src="article_pic8"></el-image>
          </el-card>
        </el-col>
        <!-- 文章简介 -->
        <el-col :span="16">
          <el-card class="article">
            <!-- 文章标题 -->
            <el-card class="title">文章标题8</el-card>
            <!-- 简介内容 -->
            <el-card class="content">文章简介8</el-card>
            <!-- 统计数据 -->
            <el-card class="article_info">
              <span>点赞数量：</span>
              <span>评论数量：</span>
              <span>阅读数量：</span>
              <span>发布日期：</span>
            </el-card>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!-- 分页区域 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="articleInfo.pagenum"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="articleInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="100"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 文章封面图
      article_pic1: require('../assets/imgs/1.png'),
      article_pic2: require('../assets/imgs/2.png'),
      article_pic3: require('../assets/imgs/3.png'),
      article_pic4: require('../assets/imgs/4.png'),
      article_pic5: require('../assets/imgs/5.png'),
      article_pic6: require('../assets/imgs/6.png'),
      article_pic7: require('../assets/imgs/7.png'),
      article_pic8: require('../assets/imgs/8.png'),

      articleInfo: {
        // 当前的页数
        pagenum: 1,
        pagesize: 2
      }
    }
  },

  methods: {
    handleSizeChange (newSize) {
      this.articleInfo.pagesize = newSize
    },

    handleCurrentChange (newPage) {
      this.articleInfo.pagenum = newPage
    }
  }
}
</script>

<style scoped>
.el-card {
  margin-bottom: 5px;
  margin-left: -5px;
}

.img {
  height: 198.5px;
  display: flex;
  align-items: center;
  overflow: hidden;
  justify-content: space-around;
  position: relative;
}
.image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.article {
  height: 197px;
}

.title {
  height: 30px;
  font-size: 21px;
  display: flex;
  align-items: center;
}

.content {
  height: 100px;
}

.article_info {
  height: 20px;
  font-size: 10px;
  display: flex;
  align-items: center;
}

span {
  margin-right: 46px;
}

.el-pagination {
  text-align: center;
}
</style>
